<template>
	<view class="page">
		<!-- 搜索 -->
		<!-- <view class="search x-c">
			<view class="search-box x-c shopro-selector-rect">
				<text class="cuIcon-search"></text>
				<text class="search-val">搜索商品</text>
			</view>
		</view> -->
		<view class="sty-list">
			<view style="font-size: 33upx; font-weight: 550;margin: 20rpx;">{{name}}</view>
			<view>
				<view class="juti-sty" v-for="(item,index) in categorys">
					<view style="position: relative;">
						<image class="img-click" :src="item.image" mode="aspectFill"></image>
						<view class="shafa">{{item.name}}</view>
						<u-icon v-if="open == index" class="icon" name="arrow-up" size="30" color="#ffffff" @click="openfold(index)"></u-icon> 
						<u-icon v-if="open != index" class="icon" name="arrow-down" size="30" color="#ffffff" @click="openfold(index)"></u-icon>
					</view>
					<view class="lists">
						<view style="margin: 20rpx 0 30rpx; "  v-if="open == index" v-for="(item1,index1) in item.goods">
							<!-- <image style="width: 150rpx;height: 120rpx;margin: 25rpx;" src="../../static/imgs/app_icon/icon1.png" mode="aspectFill"></image> -->
							<view @tap="jump('/pages/goods/detail/index', { id: item1.id })">
								<image style="width: 227rpx;height: 227rpx; margin-bottom:20rpx ;" :src="item1.image" mode="aspectFill"></image>
								<view><text>{{item1.title}}</text></view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				id:'',
				open:'-1',
				categorys:[],
				categoryIds:[]
			};
		},
		onLoad(options) {
			this.name = options.name
			this.id = options.id
			console.log("666666",options)
		},
		created() {
			var that = this
			this.$api('goods.lists').then(res=>{
				//获取商品列表中所有分类ID
				res.data.data.forEach(item=>{
					that.categoryIds.push(item.category_ids-1)
				})
				//去重
				that.categoryIds = Array.from(new Set(that.categoryIds))
				if(that.categoryIds.length>0){
					that.categoryIds.forEach(index=>{
						that.$api('categoryGoods',{category_id:that.id}).then(res=>{
							console.log("555555555",res)
							// res.data.forEach(data=>{
								// that.categorys.push(data)
								that.categorys = res.data
								console.log("454545456556655",that.categorys)
							// })
						});
					})
				}
			});
			
			that.$api('category').then(res=>{
			});
		},
		methods:{
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			
			openfold(index){
				if(index==this.open){
					this.open = -1
				}else{
					this.open = index
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #FFFFFF;
		padding-bottom: 60rpx;
	}
	
	// 搜索
	.search {
		position: fixed;
		top: 0;
		height: 100rpx;
		width: 750rpx;
		background-color: #FFFFFF;
		transition: all linear 0.3s;
		
		.search-box {
			height: 64rpx;
			width: 700rpx;
			color: #a6a6a6;
			background-color: #f6f6f6;
			border-radius: 30rpx;
		
			.cuIcon-search {
				font-size: 36rpx;
				margin-right: 20rpx;
			}
		
			.search-val {
				font-size: 30rpx;
			}
		}
	}
	.sty-list{
		display: flex;
		flex-direction: column;
		margin-top: 100rpx;
		
		.juti-sty{
			width: 705rpx;
			margin: 10rpx auto 0;
			.img-click{
				width: 100%;
				height: 200rpx;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
			}
			.lists{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				text-align: center;
			}
			.shafa{
				position: absolute;
				top: 80rpx;
				left: 30rpx;
				color: #FFFFFF;
				font-size: 32upx;
			}
			.icon{
				position: absolute;
				top: 80rpx;
				right: 60rpx;
				width: 55rpx;
				height: 55rpx;
				border-radius: 30rpx;
				justify-content: center;
				background-color: rgba(0,0,0,.5);
			}
		}
	}
	

</style>
